<template>
    <div class="w-full">
        <div class="mb-8 ml-20 block  bg-gray-50">
            <div class="flex pt-6 ml-8">
                <!-- <p> 传进来的parmas属性为 : {{ $route.params.id }}</p> -->
                <img src="http://inews.gtimg.com/newsapp_bt/0/12536943556/641" class=" w-52 h-52" alt="封面" />
                <div class=" space-y-16 ml-8">
                    <div>
                        <p>{{ ClassName[Number($route.params.id)].title }}榜</p>
                    </div>
                    <div class="text-xs text-gray-700">
                        <span>{{ ClassName[Number($route.params.id)].createTime }}</span>
                    </div>
                    <div class="flex w-20 py-1 px-2 rounded-3xl  bg-green-200">
                        <p>全部播放</p>
                    </div>
                </div>
            </div>
            <div class="h-10 w-full bg-white"></div>
            <div class="flex text-gray-500 ml-[3%] mt-6 mb-2">
                <p class="w-[2%]"></p>
                <p class="w-[40%]">歌名</p>
                <p class="w-[20%]">作者</p>
                <p class="w-[20%]">专辑</p>
                <p class="w-[5%]">时长</p>
                <p></p>
            </div>
            <div v-for="item, index in ClassName[Number($route.params.id)].data"
                class="flex text-gray-500 text-[0.8rem] leading-8 ml-[3%]">
                <HomeMusicCardPro :index="index" :title="item.name" :album="item.album" :isPlay="item.isPlay"
                    :artist="item.artist" :time="item.time" :changePlay="changeplay" :number="Number($route.params.id)" />
            </div>
        </div>
    </div>
</template>
<script setup  lang="ts">
import { ClassName } from '~~/public/Mock/MusicData';
function changeplay() {
}

</script>